<template>
  <div class="entremetsDiv">
    {{ getEntremetsList() }}
    <div class="headDiv">
      <template>
        <el-button type="success" size="medium" @click="toAdd">添加</el-button>
        <span class="queryName">配料名称:</span>
        <el-input v-model="q.name" style="width: 250px;font-size: 16px" clearable></el-input>
        <el-button type="warning" size="medium" @click="query">搜索</el-button>
        <span class="queryStatus"></span>
        <el-radio-group v-model="q.status" @change="query">
          <el-radio-button :label="0">下架</el-radio-button>
          <el-radio-button :label="1">上架</el-radio-button>
          <el-radio-button :label="-1">全部</el-radio-button>
        </el-radio-group>
      </template>
    </div>
    <div class="bodyDiv">
      <el-table :data="entremetsList" style="width: 100%" :header-cell-style="{background:'#DCDCDC',color:'#606266'}">
        <el-table-column width="110" prop="id" label="配料编号" header-align="center" align="center"></el-table-column>
        <el-table-column width="120" prop="name" label="配料名称" header-align="center" align="center"></el-table-column>
        <el-table-column width="180" label="图片" header-align="center" align="center">
          <template slot-scope="s">
            <el-image
              :src="s.row.image"
              style="width: 100px; height: 100px"
              fit="cover">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column width="180" prop="price" label="单品价格(元)" header-align="center"
                         align="center"></el-table-column>
        <el-table-column width="150" label="状态" header-align="center" align="center">
          <template slot-scope="s">
            <el-tag effect="dark" size="small" :type="s.row.status===1?'success':'danger'">
              {{ s.row.status === 1 ? '上架' : '下架' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column width="100" prop="createdUser" label="创建者" header-align="center"
                         align="center"></el-table-column>
        <el-table-column width="200" prop="createdTime" label="创建时间" header-align="center"
                         align="center"></el-table-column>
        <el-table-column width="100" prop="modifiedUser" label="修改者" header-align="center"
                         align="center"></el-table-column>
        <el-table-column width="200" prop="modifiedTime" label="修改时间" header-align="center"
                         align="center"></el-table-column>
        <el-table-column label="操作" header-align="center" align="center">
          <template slot-scope="s">
            <el-button type="primary" size="mini" @click="toUpdate(s.$index,s.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="del(s.$index,s.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="bodyBottom">
        <div class="bodyBottomPage">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.page"
            :page-sizes="page.pageSizeList"
            :page-size="page.pageSize"
            layout="prev,pager,next,total,sizes"
            :total="page.total">
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog title="配料信息" :visible.sync="dialogVisible" width="20%">
      <el-form label-width="100px">
        <el-form-item label="配料图片">

          <img ref="entremetsImg" :src="imageUrl" width="200px" height="200px"/>
          <input ref="imageInput" type="file" @change="onload()"></input>

        </el-form-item>
        <el-form-item label="配料名称">
          <el-input v-model="m.name"></el-input>
        </el-form-item>
        <el-form-item label="单品价格(元)">
          <el-input v-model="m.price"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="m.status">
            <el-radio :label=1>上架</el-radio>
            <el-radio :label=0>下架</el-radio>
          </el-radio-group>
        </el-form-item>
        <span style="margin-left: 170px">
        <el-button type="primary" @click="ok">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </span>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import * as qs from "qs";

export default {
  name: "EntremetsM",
  data() {
    return {
      forceDel: 0,
      refresh: 0,
      imageUrl: '#',
      imageFile: '',
      isAdd: false,
      dialogVisible: false,
      q: {
        name: '',
        status: 1,
      },
      page: {
        page: 1,
        pageSizeList: [4, 8, 16],
        pageSize: 4,
        total: 10,
      },
      m: {
        id: '',
        name: '',
        image: '',
        price: '',
        status: '',
        createdUser: '',
        createdTime: '',
        modifiedUser: '',
        modifiedTime: ''
      },
      entremetsList: [],
    }
  },
  methods: {
    getEntremetsList: function () {
      if (this.refresh === 0) {
        this.refresh++;
        var that = this;
        this.q.name = this.q.name.trim() === '' ? ' ' : this.q.name;
        axios.get("http://localhost:8081/entremets?name=" + this.q.name + '&status=' + this.q.status + '&page=' + this.page.page + '&pageSize=' + this.page.pageSize)
          .then(res => {
            if (res.data.status === 1) {
              that.page.total = res.data.data.total;
              that.entremetsList = res.data.data.list;
              for (let i = 0; i < that.entremetsList.length; i++) {
                that.entremetsList[i].price = (that.entremetsList[i].price / 100).toFixed(2);
              }
            }
          })
      }
    },

    toAdd: function () {
      this.dialogVisible = true;
      this.imageUrl = '#';
      this.imageFile = '';
      this.m = {};
      this.isAdd = true;
    },

    toUpdate: function (index, row) {
      this.dialogVisible = true;
      this.imageFile = '';
      this.m = JSON.parse(JSON.stringify(row));
      this.imageUrl = this.m.image;
      this.isAdd = false;
    },

    forceDelFun: function () {
      this.forceDel = 1;
      this.del();
    },

    del: function (index, row) {
      var that = this;
      this.forceDel = 0;
      axios.delete("http://localhost:8081/entremets?id=" + row.id + '&force=' + this.forceDel).then(res => {
        this.messageAlert(res.data.status,res.data.msg);
        that.getEntremetsList();
      })

    },

    onload: function () {
      this.imageFile = this.$refs.imageInput.files[0];
      this.imageUrl = window.webkitURL.createObjectURL(this.imageFile);
      this.$refs.entremetsImg.src = this.imageUrl;
    },

    sub: function () {
      const formData = new FormData();
      if(this.imageFile !== '') formData.append('file', this.imageFile);
      formData.append('name', this.m.name);

      if (this.m.price !== '') this.m.price = this.m.price * 100;
      formData.append('price', this.m.price);
      formData.append('status', this.m.status);
      var that = this;
      if (this.isAdd) {
        axios.post("http://localhost:8081/entremets", formData).then(res => {
          that.messageAlert(res.data.status, res.data.msg);
          that.refresh = 0;
          that.getEntremetsList();
        })
      } else {
        formData.append('id', this.m.id);
        if (this.imageFile !== '') {
          //清楚图片的时间戳
          this.m.image = this.m.image.split('?')[0];
          formData.append('image', this.m.image);
        }
        axios.put("http://localhost:8081/entremets", formData).then(res => {
          that.messageAlert(res.data.status, res.data.msg);
          that.refresh = 0;
          that.getEntremetsList();
        })
      }
    },



    ok: function () {
      this.sub();
      this.cancel();
    },
    cancel: function () {
      this.dialogVisible = false;
    },

    query: function () {
      this.refresh = 0;
      this.getEntremetsList();
    },


    handleSizeChange: function (val) {
      this.page.page = 1;
      this.page.pageSize = val;
      this.query();
    },
    handleCurrentChange: function (val) {
      this.page.page = val;
      this.query();
    },
    messageAlert: function (flag, msg) {
      if (flag === 1) {
        this.$message({
          message: msg,
          center: true,
          type: "success"
        })
      } else {
        this.$message({
          message: msg,
          center: true,
          type: "error"
        })
      }
    }

  }
}
</script>

<style>
.headDiv {
  padding-top: 10px;
  padding-left: 10px;
  padding-bottom: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}

.queryName {
  margin-left: 200px;
}

.queryStatus {
  margin-left: 150px;
}

.bodyDiv {
  margin-top: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}

.bodyBottom {
  height: 60px;
}

.bodyBottomPage {
  margin-top: 30px;
}


.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

</style>
